<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <cellbox middle class="coach-manage">
        <cell-item>
          <heading grade='1'>教练管理</heading>
        </cell-item>
        <cell-item class="tr small weak" >
          <el-button @click="handleAddCoach" class="orange-btn">新增教练</el-button>  
        </cell-item>
      </cellbox>
      <div class="search-box">
        <el-form v-bind="getFormProps()" label-width="90px">
          <el-form-item label="姓名：">
            <el-input v-model.trim="query.name" placeholder="请输入搜索的姓名"></el-input>
          </el-form-item>
          <el-button type="primary" class="search-btn" native-type="submit">搜索</el-button>
        </el-form>
      </div>
      <div class="coach-table">
        <el-table 
          :data="train_coach_list.list" 
          stripe
          tooltip-effect="dark" 
          style="width: 100%" 
          @sort-change="handelOrder">
          <el-table-column 
            prop="name"
            label="姓名" 
            width="100"
            sortable="custom" 
            align="center">
            <template scope="scope">
              <span class="link" @click="handleDetail(scope.$index, scope.row)">
                {{ scope.row.name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column 
            label="性别" 
            align="center">
            <template scope="scope">
              <span>{{scope.row.sex === 1? '男': '女'}}</span>  
            </template>
          </el-table-column>
          <el-table-column 
            prop="age" 
            label="年龄" 
            align="center">
            <template scope="scope">
              {{scope.row.age ? scope.row.age : '未知'}}
            </template>
          </el-table-column>
          <el-table-column 
            prop="country" 
            label="国籍" 
            align="center">
          </el-table-column>
          <el-table-column 
            prop="classNum" 
            label="授课数量" 
            align="center">
          </el-table-column>
          <el-table-column 
            prop="studentNum" 
            label="学生总人次" 
            align="center">
          </el-table-column>
          <el-table-column 
            prop="operate" 
            label="操作" 
            width="105" 
            align="center">
            <template scope="scope">
              <p><el-button size="small" @click="handleEdit(scope.$index, scope.row)" type="link">编辑</el-button></p>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-bind="getPaginationProps(train_coach_list)"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { pagingList } from 'utils/mixins'
import { mapGetters } from 'vuex'
export default {
  mixins: [pagingList],
  components: {},
  data () {
    return {
      coachList: [], // 教练列表
      name: '',
      order: true, // 升序or降序
      query: this.getQuery(),
      isVacate: true
    }
  },
  computed: {
    ...mapGetters({
      loading: 'loading',
      train_coach_list: 'train_coach_list' // 学员管理列表数据
    })
  },
  methods: {
    handleAddCoach () {
      this.$router.push({name: 'addCoach'})
    },
    handelOrder (column, prop, order) {
      console.log(column, prop, order)
      this.order = !this.order
      console.log('排序', this.order ? 'ASC' : 'DESC')
      this.$store.dispatch('train_coach_list', {order: this.order ? 'ASC' : 'DESC'})
    },
    handleDetail (index, row) {
      this.$router.push('/training/coach/detail/' + row.id)
    },
    handleEdit (index, row) {
      this.$router.push({name: 'editCoach', query: {id: row.id}})
    },
    fetch (query) {
      this.$store.dispatch('train_coach_list', query)
    }
  }
}
</script>

<style lang="scss">
.content {
  .coach-table {
    tbody {
      tr {
        font-size: 12px;
      }
    }
  }    
}
</style>

<style lang="scss" scoped>
.content {
  .coach-manage {
    margin-top: -25px;
  }
  .search-box {
    .form-search {
      .el-form-item {
        display: inline-block;
      }
      .search-btn {
        margin-left: 10px;
      }
    }
  }
  .coach-table {
    margin-top:30px;
    // .el-table{
    //   border-top:1px solid #f0f0f0;
    //   border-left:1px solid #f0f0f0;
    // }
  }
}

</style>
